<template>
  <div class="log_bg">
    <div class="top">
      <div class="logo">
        <a href="" @click.prevent="toIndex()"><img src="@/assets/images/logo.png" /></a>
      </div>
    </div>
    <div class="login">
      <div class="log_img">
        <img src="@/assets/images/l_img.png" width="611" height="425" />
      </div>
      <div class="log_c">
        <form>
          <table border="0" style="width: 370px; font-size: 14px; margin-top: 30px" cellspacing="0" cellpadding="0">
            <tr height="50" valign="top">
              <td width="55">&nbsp;</td>
              <td>
                <span class="fl" style="font-size: 24px">登录</span>
                <span class="fr">还没有商城账号，<a href="#" style="color: #ff4e00" @click.prevent="toRegister">立即注册</a></span>
              </td>
            </tr>
            <tr height="70">
              <td>用户名</td>
              <td>
                <input type="text" value="" class="l_user" v-model="loginName" required />
              </td>
            </tr>
            <tr height="70">
              <td>密&nbsp; &nbsp; 码</td>
              <td>
                <input type="password" value="" class="l_pwd" v-model="password" required @keyup.enter="Login" />
              </td>
            </tr>
            <tr>
              <td colspan="2" style="color: red" v-if="errorStatus">
                {{ errMsg }}
              </td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td style="font-size: 12px; padding-top: 20px">
                <span style="font-family: '宋体'" class="fl">
                  <label class="r_rad"><input type="checkbox" /></label><label class="r_txt">请保存我这次的登录信息</label>
                </span>
                <span class="fr"><a href="#" style="color: #ff4e00">忘记密码</a></span>
              </td>
            </tr>
            <tr height="60">
              <td>&nbsp;</td>
              <td>
                <input type="button" value="登录" class="log_btn" @click="Login" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapMutations } from "vuex";
export default {
  name: "LoginView",
  data() {
    return {
      loginName: "",
      password: "",
      errorStatus: false,
      isLoading: false,
      errMsg: '',
    };
  },
  methods: {
    ...mapMutations(["setShowPage"]),
    async Login() {
      if (!this.loginName) {
        this.$message.error("请输入用户名");
        return;
      }
      if (!this.password) {
        this.$message.error("请输入密码");
        return;
      } if (this.isLoading) return;
      this.errorStatus = false;
      this.isLoading = true;


      try {
        const response = await axios.post("/api/user/login", {
          loginName: this.loginName,
          password: this.password,
        });

        console.log("登录响应：", response);

        // 根据后端返回的code进行不同处理
        if (response.data.code === 200) {
          // 存储用户信息
          const tokenInfo = response.data;
          sessionStorage.setItem("token", tokenInfo.token);
          sessionStorage.setItem("userName", tokenInfo.userName);
          sessionStorage.setItem("type", tokenInfo.type);

          // 登录成功后跳转首页
          this.toIndex();
        } else {
          // 其他状态码都视为登录失败
          this.errorStatus = true;
          this.errMsg = response.data.msg;
        }
      } catch (error) {
        console.error("登录失败:", error);
        this.errorStatus = true;
        this.errMsg = error.data.msg;
      } finally {
        this.isLoading = false;
      }
    },

    toIndex() {
      if (!(this.$route.path === "/")) {
        this.$router.push({ name: "index" });
      }
    },
    toRegister() {
      this.setShowPage(1),
        this.$router.push({
          name: "Register",
        });
    },
  },
  beforeRouteLeave(_to, _form, next) {
    next();
  },
  created() {
    this.$store.commit("setShowPage", 1); // 将 showPage 设置为 1
  },
};
</script>

<style></style>